<template>
  <div>
    <div class="dol-load-info dol-load-loading-info" v-if="loading">
      <mu-circular-progress class="demo-circular-progress" :size="20"></mu-circular-progress>
      正在加载...
    </div>
    <slot :data="this.data" />
  </div>
</template>

<script>
  //TODO 为解决当同页面修改params实时更新，加了watch。但会导致watch和created重复请求。
  export default {
    name: "Dol-load-list",
    props:{
      url: {type: String},                                  //后台地址
      method: {type: String, default: 'get'},               //请求方式
      params: {type: Object, default: () => {}},            //请求参数
      body: {type: Object, default: () => {}},              //请求参数体
    },
    watch:{
      url(){
        if(!this.loading){
          this.refresh();
        }
      },
      params(){
        if(!this.loading){
          this.refresh();
        }
      },
      body(){
        if(!this.loading){
          this.refresh();
        }
      },
    },
    data(){
      return {
        data:[],
        loading:false,
      }
    },
    methods:{
      refresh(){
        this.loading = true;
        this.data = [];

        return this.load().then(result => {
          this.data = result.rows;
          this.loading = false;
          return Promise.resolve();
        });
      },
      load(){
        return this.$ajax({
          url: this.url,
          method: this.method,
          data:this.body,
          params:this.params,
        });
      },
    },
    created() {
      this.refresh();
    }
  }
</script>

<style scoped>

</style>
